google.load('jqueryui', '1.8.15');
$('head').append('<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />');

// does not yet support API v3
//google.load('maps', '3', {other_params: {sensor: false}});

$(document).ready(function () {
    // create a div for the map
    var container = $('#mainContainer');
    var mapDiv = $('<div id="mapDialog"></div>');
    container.append(mapDiv);
    mapDiv.dialog({autoOpen: false, title: 'Map', width: 640, height: 480,
		   position: 'right'})
	.parent().css('position', 'fixed');
    // fixed position dialog
    
    // put the map in it
    var map = new google.maps.Map(mapDiv.get(0), {
	zoom: 17,
	center: new google.maps.LatLng(37.783, -122.402),
	mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    // make the markers
    // TODO: absolute urls
    var newMarker = new google.maps.Marker({
	position: new google.maps.LatLng(0, 0),
	map: null,
	icon: 'http://transit-appliance-utils.googlecode.com/svn/trunk/NextBus/reports/newStop.png',
	title: 'New stop'
    });

    var oldMarker = new google.maps.Marker({
	position: new google.maps.LatLng(0, 0),
	map: null,
	icon: 'http://transit-appliance-utils.googlecode.com/svn/trunk/NextBus/reports/oldStop.png',
	title: 'Removed stop'
    });

    // resize the map when the dialog is resized
    mapDiv.bind("dialogresize", function () {
	console.log('resizing');
	google.maps.event.trigger(map, 'resize');
	mapDiv.parent().css('position', 'fixed');
    });

	
    // create a "show map" link
    container.append($('<div style="width:100%; background: #ffffff;' +
		       'position: fixed; border-bottom: 3px #aaaaaa; z-index: 20">' +
		       '<a href="#">show map</a></div>')
		     .click(function (e) {
	e.preventDefault();
	mapDiv.dialog('open');
	// trigger a resize to make sure the map fills the window
	google.maps.event.trigger(map, 'resize');
    }));

    // create the 'new stops' display
    container.append('<div id="stopAccordion" style="padding-top: 20pt"></div>');
    var accd = $('#stopAccordion');
   
    // for new or deleted
    // stoptype - new or del
    function makeStop (s) {
	// eventually add a span-based tooltip
	var routeNames = [];
	var routesLen = s.routes.length;
	for (var i = 0; i < routesLen; i++) 
	    routeNames.push(s.routes[i].route_short_name)

	return   '<table>' +
		 '<tr><th scope="row">Stop ID</th><td>' + s.stop_id +
		 '</td></tr>' +
		 '<tr><th scope="row">Stop name</th><td>' + s.stop_name +
		 '</td></tr>' +
		 '<tr><th scope="row">Stop Desc</th><td>' + s.stop_desc +
		 '</td></tr>' +
		 '<tr><th scope="row">Agency</th><td>' + s.agency +
		 '</td></tr>' +
		 '<tr><th scope="row">AVL ID</th><td>' + s.avl_id +
		 '</td></tr>' +
		 '<tr><th scope="row">Stop code</th><td>' + s.stop_code +
		 '</td></tr>' +
		 '<tr><th scope="row">Stop ID</th><td>' + s.stop_id +
		 '</td></tr>' +
	         '<tr><th scope="row">Routes</th><td>' + routeNames.join(', ') +
		 '</td></tr>' +
		 '<tr><th scope="row">Stop URL</th><td>' + s.stop_url +
		 '</td></tr>' +
		 '<tr><th scope="row">Zone ID</th><td>' + s.zone_id +
		 '</td></tr>' +
		 '<tr><th scope="row">Stop ID</th><td>' + s.stop_id +
		 '</td></tr>' +
		 '<tr><th scope="row">Lat,Lon</th><td>' + s.stop_lat +
		 ', ' + s.stop_lon +
		 '</td></tr>' +
		 '</table>';
    }

    var newLen = stops.new.length;
    for (var i = 0; i < newLen; i++) {
	var stop = stops.new[i];
	accd.append('<h3><a href="#">New: ' + stop.stop_id + ' ' +
		    stop.stop_name + '</a></h3>');
	accd.append('<div stopType="new" i="' + i + '">' + 
		    makeStop(stop) + '</div>');
    };
    
    var delLen = stops.del.length;
    for (var i = 0; i < delLen; i++) {
	var stop = stops.del[i];
	accd.append('<h3><a href="#">Deleted: ' + stop.stop_id + ' ' +
		    stop.stop_name + '</a></h3>');
	accd.append('<div stopType="del" i="' + i + '">' + 
		    makeStop(stop) + '</div>');
    };

    var updLen = stops.updated.length;
    for (var i = 0; i < updLen; i++) {
	var s = stops.updated[i];

	

	var newRouteNames = [];
	var oldRouteNames = [];

	accd.append('<h3><a href="#">Updated: ' + s.new.stop_id + ' ' +
		    s.new.stop_name + '</a></h3>');
	accd.append('<div stopType="updated" i="' + i + '">' + 
		    '<table><tr><th scope="col">Attribute</th>' +
		    '<th scope="col">New</th><th scope="col">Old</th></tr>' +
		    '<tr><th scope="row">Stop ID</th><td>' + s.new.stop_id +
		    '</td><td>' + s.old.stop_id + '</td></tr>' +
		    '<tr><th scope="row">Stop name</th><td>' + s.new.stop_name +
		    '</td><td>' + s.old.stop_name + '</td></tr>' +
		    '<tr><th scope="row">Stop Desc</th><td>' + s.new.stop_desc +
		    '</td><td>' + s.old.stop_desc + '</td></tr>' +
		    '<tr><th scope="row">Agency</th><td>' + s.new.agency +
		    '</td><td>' + s.old.agency + '</td></tr>' +
		    '<tr><th scope="row">AVL ID</th><td>' + s.new.avl_id +
		    '</td><td>' + s.old.avl_id + '</td></tr>' +
		    '<tr><th scope="row">Stop code</th><td>' + s.new.stop_code +
		    '</td><td>' + s.old.stop_code + '</td></tr>' +
		    '<tr><th scope="row">Routes</th><td>' + 
		    s.new.routes +
		    '</td><td>' + s.old.routes + 
		    '</td></tr>' +
		    '<tr><th scope="row">Stop URL</th><td>' + s.new.stop_url +
		    '</td><td>' + s.old.stop_url + '</td></tr>' +
		    '<tr><th scope="row">Zone ID</th><td>' + s.new.zone_id +
		    '</td><td>' + s.old.zone_id + '</td></tr>' +
		    '<tr><th scope="row">Lat,Lon</th><td>' + s.new.stop_lat +
		    ', ' + s.new.stop_lon +
		    '</td><td>' + s.old.stop_lat + ',' + s.old.stop_lon +
		    '</td></tr>' +
		    '</table></div>');
    };

    accd.accordion({
	change: function (e, ui) {
	    // ui.newContent is the new div
	    var stop = stops[ui.newContent.attr('stopType')][ui.newContent.attr('i')];	    

	    if (ui.newContent.attr('stopType') == 'new') {
		var pos = new google.maps.LatLng(
		    stop.stop_lat,
		    stop.stop_lon);
		newMarker.setPosition(pos);
		newMarker.setMap(map);
		oldMarker.setMap(null);
		map.setCenter(pos);
	    }

	    else if (ui.newContent.attr('stopType') == 'del') {
		var pos = new google.maps.LatLng(
		    stop.stop_lat,
		    stop.stop_lon);
		oldMarker.setPosition(pos);
		oldMarker.setMap(map);
		newMarker.setMap(null);
		map.setCenter(pos);
	    }

	    if (ui.newContent.attr('stopType') == 'updated') {
		var newPos = new google.maps.LatLng(
		    stop.new.stop_lat,
		    stop.new.stop_lon);
		var oldPos = new google.maps.LatLng(
		    stop.old.stop_lat,
		    stop.old.stop_lon);
		oldMarker.setPosition(oldPos);
		oldMarker.setMap(map);
		newMarker.setPosition(newPos);
		newMarker.setMap(map);
		map.setCenter(newPos);
	    }
	}
    });

    // add a copyright at the bottom for the map icons
    container.append('<i>Icons from the <a href="http://mapicons.nicolasmollet.com/">google-maps-icons project</a></i>');
});   

